<template>
  <section class="app-container">
    <!--工具条-->
    <el-row>
      <el-col :span="9" class="inputform">
        <div>类别:</div>
        <el-select v-model="queryparam.typecode" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.dictionary_code"
            :label="item.dictionary_name"
            :value="item.dictionary_code"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="9" class="inputform">
        <div>标题:</div>
        <el-input placeholder="标题" v-model="queryparam.title"></el-input>
      </el-col>
      <el-col :span="6" class="inputform">
        <el-button type="primary" @click="$refs.gridlist.loadData(1)"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="
            selectid = null
            $refs.newcontentdialog.visible = true
          "
          >新增</el-button
        ></el-col
      >
    </el-row>
    <gridlist
      :queryparam="queryparam"
      apicode="dictionary.querynewcontentList"
      ref="gridlist"
      :scopedSlots="scopedSlots"
    >
      <div slot="avatar" slot-scope="record">
        <img :src="record.row.avatar" width="150px" height="80px" />
      </div>
      <template slot="operation" slot-scope="record">
        <a
          class="margin-a"
          href="javascript:;"
          style="margin-right: 5px;"
          @click="edit(record.row)"
          >修改</a
        >
        <a
          class="margin-a"
          href="javascript:;"
          style="margin-right: 5px;"
          @click="deletefun(record.row)"
          >删除</a
        >
        <a
          class="margin-a"
          href="javascript:;"
          style="margin-right: 5px;"
          @click="SaveAs(record)"
          >另存为</a
        >
      </template>
    </gridlist>
    <zhlDialog
      title="发布信息新增"
      ref="newcontentdialog"
      width="960px"
      class="my-dialog"
    >
      <newcontentinfo
        :fid="selectid"
        @savedata="SaveAs"
        @close="$refs.newcontentdialog.visible = false"
        :catalogcode="queryparam.catalogcode"
        :dictionarycode="queryparam.dictionarycode"
      ></newcontentinfo>
    </zhlDialog>
  </section>
</template>
<script>
import gridlist from '@/components/gridlist/index.vue'
import { apiComm } from '@/api/index'
import newcontentinfo from './newcontentinfo.vue'
export default {
  props: ['catalogcode', 'dictionarycode'],
  data() {
    return {
      queryparam: {
        typecode: '',
        title: '',
        catalogcode:
          this.catalogcode === undefined
            ? 'GlobalCertificate'
            : this.catalogcode,
        dictionarycode:
          this.dictionarycode === undefined
            ? 'certificateType'
            : this.dictionarycode
      },
      selectid: {},
      typeList: [],
      scopedSlots: ['avatar']
    }
  },
  components: { gridlist, newcontentinfo },
  methods: {
    edit(rowitem) {
      this.selectid = rowitem.fid
      this.$refs.newcontentdialog.visible = true
    },
    deletefun(rowitem) {
      apiComm('dictionary.delNewContent', {
        fid: rowitem.fid
      }).then(res => {
        console.log(res)
        this.$refs.gridlist.loadData(1)
      })
    },
    SaveAs() {
      this.$refs.gridlist.loadData(1)
      this.$refs.newcontentdialog.visible = false
    },
    loadTypeData() {
      apiComm('dictionary.getdictionaryList', {
        typecode: this.queryparam.dictionarycode
      }).then(res => {
        this.typeList = res.data
      })
    }
  },
  mounted() {
    this.loadTypeData()
  }
}
</script>
<style scoped>
.inputform div:first-child {
  width: 80px;
  display: inline-block;
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}
.inputform .el-input {
  width: calc(100% - 100px);
  float: right;
}
.inputform .el-select {
  width: calc(100% - 100px);
  float: right;
}
.inputform button {
  margin-left: 5px;
  margin-right: 5x;
}
</style>
